<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				color: black;
				font-size: 16px;
			}

			.float-left {
				float: left;
			}

			.float-right {
				float: right;
			}

			.clear-both::after {
				display: block;
				content: "";
				clear: both;
			}

			.chat-box {
				width: 100%;
			}

			.chat-box-title {
				width: 100%;
				height: 64px;
				line-height: 64px;
				font-size: 24px;
				border-bottom: 1px solid black;
				position: fixed;
				text-align: center;
				background-color: deepskyblue;
			}

			.chat-box-title-friend {
				width: 30%;
				height: 63px;
				border-right: 1px solid black;
				box-sizing: border-box;
				/* background: white; */
			}

			.chat-box-title-content {
				width: 70%;
				height: 63px;
			}

			.chat-box-body {
				padding-top: 64px;
			}




			.chat-box-body-friend {
				width: 30%;
				overflow-y: scroll;
			}


			.chat-box-body-friend-content li {
				width: 100%;
				text-align: center;
				line-height: 128px;
				height: 128px;
				border-bottom: 1px solid black;
				background: white;
				list-style: none;
			}


			.chat-box-body-context {
				width: 70%;
				display: none;
			}

			.chat-box-body-context-content {
				width: 100%;
				height: 400px;
				background: white;
				overflow-y: scroll;
			}

			.chat-box-body-context-content>li {
				list-style: none;
				width: 70%;

			}

			.chat-box-body-context-content-left {}

			.chat-box-body-context-content-right {
				text-align: right;
			}

			.chat-box-body-context-input {}

			.chat-box-body-context-input>textarea {
				width: 80%;
			}

			.chat-box-body-context-input>button {
				width: 18%;
			}
		</style>
	</head>
	<body>
		<div class="chat-box">
			<div class="chat-box-title clear-both">
				<div class="chat-box-title-friend float-left">联系人</div>
				<div class="chat-box-title-content float-left">聊天栏</div>
			</div>
			<div class="chat-box-body">
				<div class="chat-box-body-friend float-left">
					<div class="chat-box-body-friend-content">
						<li class="friend" onclick="toChat(1,this)">1</li>
						<li class="friend" onclick="toChat(2,this)">2</li>
						<li class="friend" onclick="toChat(3,this)">3</li>
						<li class="friend" onclick="toChat(4,this)">4</li>
						<li class="friend" onclick="toChat(5,this)">5</li>
						<li class="friend" onclick="toChat(6,this)">6</li>
						<li class="friend" onclick="toChat(7,this)">7</li>
						<li class="friend" onclick="toChat(8,this)">8</li>
						<li class="friend" onclick="toChat(9,this)">9</li>
						<li class="friend" onclick="toChat(10,this)">10</li>
					</div>


				</div>
				<div class="chat-box-body-context float-left">
					<div class="chat-box-body-context-content clear-both">

					</div>
					<div class="chat-box-body-context-input clear-both">
						<textarea class="float-left"></textarea>
						<button class="float-left">发送</button>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="./axios.min.js"></script>
	<script>
		let chatBox = document.querySelector(".chat-box");
		let chatBoxBody = document.querySelector(".chat-box-body");
		let chatBoxBodyFriend = document.querySelector(".chat-box-body-friend");
		let chatBoxBodyFriendContent = document.querySelector(".chat-box-body-friend-content")
		let chatBoxBodyContext = document.querySelector(".chat-box-body-context");
		let chatBoxBodyContextContent = document.querySelector(".chat-box-body-context-content");
		let chatBoxBodyContextInput = document.querySelector(".chat-box-body-context-input");
		let chatBoxBodyContextInputTextarea = document.querySelector(".chat-box-body-context-input>textarea");
		let chatBoxBodyContextInputButton = document.querySelector(".chat-box-body-context-input>button");

		let chatBoxTitleContent = document.querySelector(".chat-box-title-content");

		window.onload = () => {
			axios.get("./friend.json").then((data) => {
				chatBoxBodyFriendContent.innerHTML = null;
				data.data.forEach((item) => {
					chatBoxBodyFriendContent.innerHTML += `
					<li class="friend" onclick="toChat('${item.uname}',this,${item.uid})">
						<img style="height:30px;width:30px" src="${item.headImg}"/>
						${item.uname}
					</li>
					`;
				})
			})
			let contentHeight = window.innerHeight - 64;
			chatBoxBodyFriend.style.height = contentHeight + "px";
			chatBoxBodyContext.style.height = contentHeight + "px";
			chatBoxBodyContextContent.style.height = contentHeight * 0.8 + "px";
			chatBoxBodyContextInput.style.height = contentHeight * 0.2 + "px";
			chatBoxBodyContextInputTextarea.style.height = (contentHeight * 0.2 - 10) + "px";
			chatBoxBodyContextInputButton.style.height = (contentHeight * 0.2 - 10) + "px";
		}


		function toChat(t, ele, uid) {
			let chatBoxBodyFriendContentLis = document.querySelectorAll(".chat-box-body-friend-content>li");
			chatBoxBodyFriendContentLis.forEach((item) => {
				if (item == ele) {
					item.style.background = "#ccc";
					return true;
				}
				item.style.background = "white";
			})
			chatBoxBodyContext.style.display = "block";
			chatBoxTitleContent.innerHTML = t;
			axios.get("./chat.json").then((data) => {
				chatBoxBodyContextContent.innerHTML = null;
				console.log(uid + "============" + data.data[0].uid);
				if (uid == data.data[0].uid) {
					console.log("OK");
					data.data[0].data.chat.forEach((item) => {
						if (item.send == 1) {
							chatBoxBodyContextContent.innerHTML += `
							<li class='chat-box-body-context-content-left float-left'>
								<img style="height:30px;width:30px" src="${data.data[0].data.headImg}" /><span>${item.time}</span>
								<p>${item.content}</p>
							</li>
						`
						} else {
							chatBoxBodyContextContent.innerHTML += `
							<li class='chat-box-body-context-content-right float-right'>
								<span>${item.time}</span><img style="height:30px;width:30px" src="https://img2.baidu.com/it/u=2796811400,2224301012&fm=26&fmt=auto" />
								<p>${item.content}</p>
							</li>
						`
						}

					})
				}
			})
		}
	</script>
</html>
